<template>
  <yd-ls-box>
    <div class="yd-ls-height"></div>
    <yd-ls-layout title="绑定手机" :onfoot=false>
      <yd-cell-group>
        <yd-cell-item>
          <yd-icon slot="icon" name="phone3"></yd-icon>
          <yd-input slot="right" type="number" v-model="regphone" regex="mobile" required ref="regphone" placeholder="请输入手机号码"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <yd-icon slot="icon" name="shield-outline"></yd-icon>
          <input type="text" maxlength="6" v-model="code" slot="right" placeholder="请输入验证码">
          <yd-sendcode slot="right" v-model="incode" @click.native="sendCode" type="warning"></yd-sendcode>

        </yd-cell-item>

      </yd-cell-group>


    </yd-ls-layout>
    <div class="yd-ls-reg-tips">
      点击下一步按钮，即表示同意<router-link to="/prototcol?isreg=1">< {{comName}}服务协议 ></router-link>
    </div>
    <yd-ls-button btnname="下一步" @handle-button="nextStep"></yd-ls-button>
  </yd-ls-box>
</template>

<style>
.yd-ls-reg-tips {
  width: 100%;
  text-align: center;
  color: #919191;
  position: fixed;
  bottom: 80px;
}
.yd-ls-reg-tips a {
  display: inline-block;
  color: #4870f3;
  font-size: 0.28rem;
  font-weight: 600;
  padding: 0 8px;
}
</style>
<script>
import ydLsBox from "../../../components/yd-ls-box.vue";
import ydLsLayout from "../../../components/yd-ls-layout.vue";
import ydLsButton from "../../../components/yd-ls-button.vue";
import api from "../../../axios/api";

export default {
  name: "reg",
  data() {
    return {
      code: "",
      incode: false,
      regphone: "",
      comName: api.default_title
    };
  },
  created() {
    //TODO: 从公众号进时，检查openid
    if(this.$route.query.openid){
      localStorage.openId = this.$route.query.openid
    }
  },
  methods: {
    init() {},
    sendCode() {
      let phoneValid = this.phoneValid(); // 校验手机号码
      if (!phoneValid) return;
      this.$dialog.loading.open('发送中...');
      this.axios.get(api.base_code, {
          params: {
            mobileno: this.regphone
          }
        }).then(m => {
          this.$dialog.loading.close();
          this.incode = true;
          this.notify("已发送，请查收！");
        }).catch(err => {
          this.$dialog.loading.close();
          this.notify("发送失败，请重发！");
        });
    },
    nextStep() {
      let phoneValid = this.phoneValid(); // 校验手机号码
      if (!phoneValid) return;

      if (!!!this.code || this.code.length < 6) {
        this.notify("请输入正确的验证码！");
        return;
      }

      let params = {
        Mobile: this.regphone,
        Code: this.code,
        WeiXinToken: localStorage.openId
      };
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios.post(api.reg_bind, params).then(m => {
        this.$dialog.loading.close()
        if (m.data.retcode != 0) {
          this.notify(m.data.retmsg);
          return;
        }
        
        let mid = m.data.data.mid;
        let isFinshed = m.data.data.isFinshed;

        this.$store.dispatch("fetchMid", mid);
        this.axios.get(api.get_authenticate).then(m => {
          this.$router.push("home");
        });
        
        
      }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
    },
    phoneValid() {
      const regPhone = this.$refs.regphone;
      if (!regPhone.valid) {
        this.notify("请先填写正确的11位数手机号码！");
        return false;
      } else {
        return true;
      }
    },
    notify(info) {
      this.$dialog.notify({
        mes: info,
        timeout: 1500
      });
    }
  },
  mounted() {
    this.init();
  },
  components: { ydLsBox, ydLsLayout, ydLsButton }
};
</script>
